<template>
  <div id="app" v-cloak>
    <router-view></router-view>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

export default {
  name: "App",
  components: {},
  mounted() {
    window.addEventListener("unload", this.saveState);
  },
  computed: {
    ...mapGetters("userInfo", [
      //个人信息
      "userinfo",
      //登录状态
      "loginStatus",
      //歌单
      "userPrivatePlayList",
    ]),
  },
  methods: {
    saveState() {
      window.sessionStorage.setItem("userinfo", JSON.stringify(this.userinfo));
      window.sessionStorage.setItem("loginStatus", this.loginStatus);
      window.sessionStorage.setItem("userPrivatePlayList", JSON.stringify(this.userPrivatePlayList));
    },
  },
};
</script>

<style lang='less'>
@import url('./assets/font/font.css');
@import url('./assets/icon/font_2267080_8fzho4mdd6u/iconfont2.css');
@import url('/assets/icon/font_2267080_8fzho4mdd6u/iconfont.css');
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  outline: none;
}
body::-webkit-scrollbar{
  background-color: #fff;
  width: 4px;
}
body::-webkit-scrollbar-thumb{
  background-color: #dd1815d0;
  border-radius: 6px;
}
body::-webkit-scrollbar-button{
  background-color: rgb(209, 41, 35);
  height: 60px;
}
[v-cloak]{
  display: none;
}

</style>
